import React, { Component } from "react";
import { getGoodsDetail } from "../../utils/dataApi";
import { withRouter } from "react-router-dom";
import { Carousel, Toast } from "antd-mobile";
import PageNav from "../PageNav";
import styles from "./GoodDetail.module.scss";

class GoodsDetail extends Component {
  state = {
    goods: [],
    imgHeight: 176,
    is_collect: false, // 默认情况商品没有被收藏
  };

  async componentDidMount() {
    let { goods_id } = this.props.match.params;
    let res = await getGoodsDetail({
      goods_id: goods_id,
    });

    this.setState({
      goods: res.message,
    });

    // 页面第一次进来 判断是否已经收藏
    let collections = JSON.parse(localStorage.getItem("collections") || "[]");
    let index = collections.findIndex((v, i) => {
      if (v.goods_id === goods_id) {
        return true;
      }
    });
    if (index !== -1) {
      this.setState(() => {
        return {
          is_collect: true,
        };
      });
    }
  }

  handleCollect = (goods_id) => {
    // 处理收藏的逻辑的
    // 1. good 信息存在本地缓存中
    // 2. 点击收藏按钮 先去本地缓存查看这个商品有没有被收藏
    // 3. 如果已经被收藏，取消收藏，把商品从本地缓存中移除；没有被收藏，收藏，同时把商品存在本地缓存中
    // 其它：页面首次进来 本地缓存检查是否被收藏 is_collect = true
    let collections = JSON.parse(localStorage.getItem("collections") || "[]");

    let index = collections.findIndex((item, i) => {
      if (item.goods_id === goods_id) {
        return true;
      }
    });

    if (index !== -1) {
      collections.splice(index, 1);
      Toast.info("取消收藏", 1);
      this.setState(() => {
        return {
          is_collect: false,
        };
      });
    } else {
      Toast.info("收藏成功", 1);
      collections.push(this.state.goods);
      this.setState(() => {
        return { is_collect: true };
      });
    }
    localStorage.setItem("collections", JSON.stringify(collections));
  };

  render() {
    let { goods = {} } = this.state;
    // goods和pics默认为空对象、空数组
    let { pics = [] } = this.state.goods;

    return (
      <div className={styles.ykGoodDetail}>
        <PageNav title="商品详情" left={true}></PageNav>

        {/* 轮播图 */}
        <div className={styles.yhGDSwiper}>
          <Carousel autoplay={true} infinite>
            {pics.map((val) => (
              <img
                key={val.pics_id}
                src={val.pics_mid}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={() => {
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            ))}
          </Carousel>
        </div>

        {/* 商品收藏区域 */}
        <div className={styles.yhGDCollect}>
          <div className={styles.gdCollectLeft}>￥{goods.goods_price}</div>
          <div className={styles.gdCollectRight}>
            <i className="iconfont icon-fenxiang"></i>
            <i
              className={
                this.state.is_collect
                  ? "iconfont icon-shoucang " + styles.active
                  : "iconfont icon-shoucang"
              }
              onClick={this.handleCollect.bind(this, goods.goods_id)}
            ></i>
          </div>
        </div>

        {/* 商品标题 */}
        <div className={styles.yhGDTitle}>{goods.goods_name}</div>

        {/* 图文详情 */}
        <div className={styles.yhGDIntroduce}>
          <div className={styles.title}>图文详情</div>
          <div dangerouslySetInnerHTML={{ __html: goods.goods_introduce }}></div>
        </div>

        {/* 底部工具栏 */}
        <div className={styles.yhGDBottom}>
          <div className={styles.gdBottomContact}>
            <i className="iconfont icon-lianxikefu"></i>
            <div className={styles.title}>联系客服</div>
          </div>
          <div className={styles.gdBottomCart}>
            <i className="iconfont icon-gouwuche"></i>
            <div className={styles.title}>购物车</div>
          </div>
          <div className={styles.gdBottomAdd}>
            <span className={styles.title1}>加入购物车</span>
          </div>
          <div className={styles.gdBottomBuy}>
            <span className={styles.title2}>立即购买</span>
          </div>
        </div>
        {/* 底部工具栏的结束 */}
      </div>
    );
  }
}

export default withRouter(GoodsDetail);
